<template>
    <el-dialog v-model="visible" title="修改用户密码" :width="width" @close="resetForm" @open="init">
        <el-form label-width="100px" label-position="left"
                 status-icon
                 ref="formRuleRef"
                 :model="ruleForm"
                 :rules="rules">
            <el-form-item label="旧密码"  prop="oldPwd" desc="eee">
                <el-input v-model="ruleForm.oldPwd" type="password" placeholder="请输入原来的密码" clearable/>
            </el-form-item>

            <el-form-item label="新密码" prop="newPwd">
                <el-input v-model="ruleForm.newPwd" type="password" placeholder="请输入新的密码" show-password clearable/>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPwd">
                <el-input v-model="ruleForm.confirmPwd" type="password" placeholder="请重新输入新的密码" show-password clearable/>
                <div class="pwd-hint">密码包含 数字,英文,字符中的两种以上，长度6-20</div>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="default" @click="visible=false">取消</el-button>
            <el-button type="primary" @click="submitUpdate">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import {ref,getCurrentInstance} from 'vue';
import {updateUserPwd} from "../../../network/emp";
import {reactive} from "vue";
import test from "../../../router/test";

export default {
    name: "UserPwdUpdate",
    emits:['modify-successful'],
    props:{
        width: ''
    },
    setup(props,{emit}){
        const visible = ref(false);
        const ruleForm = reactive({
            oldPwd: null,
            newPwd: null,
            confirmPwd: null
        })
        const validateConfirmPwd = (rule, value, callback)=>{
            // callback(new Error('Please input the password again'))
            if(value !== ruleForm.newPwd){
                callback(new Error('两次输入的密码不一致!'));
            }
            callback();
        };
        const validatePwdFmt = (rule, value, callback)=>{
            if(!globalProperties.$validate.checkPwd(value)){
                callback(new Error('密码格式不正确'))
            }
            callback();
        }
        const rules = reactive({
            old: [
                { required: true, message: 'Please input your password', trigger: 'blur' },
            ],
            newPwd: [
                { required: true, message: 'Please input your new password', trigger: 'blur' },
                { validator: validatePwdFmt,trigger: 'blur'}
            ],
            confirmPwd: [
                { required: true, message: 'Please input again new password', trigger: 'blur' },
                { validator: validateConfirmPwd,trigger: 'blur'}
            ]
        })
        const formRuleRef = ref(null);
        const internalInstance = getCurrentInstance(); // 有效  全局
        const globalProperties = internalInstance?.appContext.config.globalProperties;
        // console.log('setupContext',context)
        const submitUpdate = ()=>{
            console.log('formRuleRef',formRuleRef.value)
            formRuleRef.value.validate((valid) => {
                if (valid) {
                    updateUserPwd({
                        oldPwd:ruleForm.oldPwd,
                        newPwd:ruleForm.newPwd
                    }).then(vo=>{
                        globalProperties.$response.handle({
                            data: vo,
                            success: '修改密码成功',
                            error: vo.msg,
                            successFn: ()=>{
                                setTimeout(function (){
                                    emit('modify-successful')
                                },1000)
                                visible.value = false;
                            },
                            log: '修改密码结果'
                        })
                    })
                } else {
                    ElMessage.error('表单信息有误，请填写正确在提交!');
                    return false
                }
            })
        }
        const resetForm = ()=>{
            formRuleRef.value?.resetFields();
        }

        return{
            ruleForm,
            rules,
            formRuleRef,
            submitUpdate,
            resetForm,
            visible
        }
    },
    methods:{
        init(){

        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.el-select-dropdown__item{
    width: 100%;
}
.el-cascader-node{
    width: 100%;
}
.explain{
    font-size: 12px;
    color: #a1a1a1;
}
.pwd-hint{
    font-size: 12px;
    height: 12px;
    color: lightgray;
}
</style>
<style>
.el-cascader-node{
    width: 100%;
}
.el-scrollbar__view{
    width: 180px;
}

</style>